<template>
    <div class="itemShow">
        <div class="itemShow-container swiper-container">
            <div class="swiper-wrapper">
                <div class="page swiper-slide">
                    <li v-for="(item, index) in page1" :key="index">
                        <img :src="item.imgUrl" alt="">
                        <span>{{ item.text }}</span>
                    </li>
                </div>
                <div class="page swiper-slide">
                    <li v-for="(item, index) in page2" :key="index">
                        <img :src="item.imgUrl" alt="">
                        <span>{{ item.text }}</span>
                    </li>
                </div>
                <div class="page swiper-slide">
                    <li v-for="(item, index) in page3" :key="index">
                        <img :src="item.imgUrl" alt="">
                        <span>{{ item.text }}</span>
                    </li>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="shopHot">
            <img src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978466633.png" alt="">
            <span>网店系统的品牌魅力该如何建立起来</span>
            <i class="iconfont">&#xe634;</i>
        </div>
    </div>
</template>

<script>
import Swiper, { Pagination } from 'swiper'
import 'swiper/css/pagination'
export default {
    data() {
        return {
            data: [
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/9JVcPMp5TemauXCVQxnIY50u80vcxnFGfnn33CKh.png?imageView2/2/format/webp",
                    "text": "潮流服饰"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/EaINOz1VE3yvzyO6l2LoHNRQHt0iGXrk1uhfvwEf.png?imageView2/2/format/webp",
                    "text": "箱包配饰"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/ZHsZuTkcuZGa7Mu4n5W1E6qsRQQBtkl9fzByJsUk.png?imageView2/2/format/webp",
                    "text": "美容护肤"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/8vjN7XPR9BD1BGqGYDGmJiQvk1UPH4duF4csjuaV.png?imageView2/2/format/webp",
                    "text": "母婴儿童"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/xypYud8p2sTivnyrf3cSmVwLt5ZalTtHraQqGYCl.png?imageView2/2/format/webp",
                    "text": "手机数码"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/xnzngK6mJ1VamCDXKd5GH51C3asWfCnd8btRiZn2.png?imageView2/2/format/webp",
                    "text": "微社区"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/3QggHJzSCrK1osf8DUYQxCUC3RhxaUySDkc5EMoC.gif?imageView2/2/format/webp",
                    "text": "拼团"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/JMambFMHt5z76qndHS0I0mjDCEr2u20JM7zDtMlr.gif?imageView2/2/format/webp",
                    "text": "预售"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/jUsageRXcEmvz0G8QutdBJ9IJgUxFsxgWAgdpHeA.png?imageView2/2/format/webp",
                    "text": "拍卖"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/KhlceHTjkqz49Bzijf4HWtumIuIf1E45a7l1aOAJ.gif?imageView2/2/format/webp",
                    "text": "超值礼包"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/q9h1Y4UvaW7y5VnH79Cqr2BdtRZt3gEttYdgR1MR.png?imageView2/2/format/webp",
                    "text": "家具装修"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/oMGz9EagOpfLL3XlSBn6vHPgBZgU0QwKKaLPXDUt.png?imageView2/2/format/webp",
                    "text": "休闲零食"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/pCf41B18W9euGsTSrIkJs5eK3HhEALVLPdWoAOXk.png?imageView2/2/format/webp",
                    "text": "水果生鲜"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/4z9ufpdgpicgA74Imt0RSSImqbgEj6YFu00MNxaX.png?imageView2/2/format/webp",
                    "text": "萌宠"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/UymsBalqZUL3wq4oFBJDFWaXLhgryFGobEu1RhDI.png?imageView2/2/format/webp",
                    "text": "大家电"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/UQTRBJwNLVDG039wMG5CXynqkcx3oF3HGzoGV5ny.png?imageView2/2/format/webp",
                    "text": "店铺街"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/UpTTTRthFaAEpTJ1GiZewv4xVFXrd5gB2XeLBaP0.png?imageView2/2/format/webp",
                    "text": "品牌特卖"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/WqxgnvKS6BfKXB0lx70X6tGqNaDWTqHi9KH406vV.png?imageView2/2/format/webp",
                    "text": "天天特价"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/sNAwNBmaAczicgHB4N0xwM7kHKs2ZnKHiv4mjZ1l.png?imageView2/2/format/webp",
                    "text": "限时团购"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/1rJ3qEFi4OPajG698A9QdskNFKYClR4Qa7S4Mw39.png?imageView2/2/format/webp",
                    "text": "积分商城"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/wyMGxcr9uxhB5YtWewXYMDw0UGczfGyBBxc9Hphv.png?imageView2/2/format/webp",
                    "text": "限时秒杀"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/1wRGZtwI3cq21DLyWHFePxt5H6qdNDH9aBcl8k5E.png?imageView2/2/format/webp",
                    "text": "拍卖"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/HAJDYBclMe42pCC4ItJsY620zTBatK3hEyRB5Fg5.png?imageView2/2/format/webp",
                    "text": "促销活动"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/HKzNalAyacXbxTLKPibR0jC7qnP6JHsEGl9JCviv.png?imageView2/2/format/webp",
                    "text": "酒水饮料"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/TBCUi3fLUPlppDqGrWCH28qVzy1mYg0lEXI9WVYo.png?imageView2/2/format/webp",
                    "text": "母婴专区"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/j3gv9BDI6fKwNOjaw1n2DkZDDUshdjNzjF7Uexr3.png?imageView2/2/format/webp",
                    "text": "图书文娱"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/6t4ROmMBBhI8hThOZAQvf2Pf942aGbBylTC5A7MZ.png?imageView2/2/format/webp",
                    "text": "中西乐器"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/Z5XnIysiZKv1uqwEl7ZMc0DvBPMTme7BbMrcjpPu.png?imageView2/2/format/webp",
                    "text": "花卉绿植"
                },
                {
                    "imgUrl": "https://x.dscmall.cn/storage/data/gallery_album/original_img/0aCkDXSBMmYC0eMFvfJK3xgO1KOiKqoGqyMwYWqR.png?imageView2/2/format/webp",
                    "text": "香水香氛"
                }
            ],
            swiper: null
        }
    },
    mounted() {
        this.swiper = new Swiper('.itemShow-container', {
            modules: [Pagination],
            slidesPerView: 'auto',
            spaceBetween: 0,
            freeMode: true,
            freeModeSticky: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            }
        });
    },
    beforeDestroy() {
        if (this.swiper) {
            this.swiper.destroy();
        }
    },
    computed: {
        page1() {
            return this.data.slice(0, 10)
        },
        page2() {
            return this.data.slice(10, 20)
        },
        page3() {
            return this.data.slice(20, this.data.length)
        }
    }
}
</script>

<style scoped>
.itemShow {
    width: 94.6667vw;
    margin: 0 auto;
    margin-top: 2.6667vw;
    background-color: #fff;
    box-sizing: border-box;
    padding: 2.6667vw;
    padding-bottom: 0px;
    border-radius: 2.6667vw;
    overflow: hidden;
}

.itemShow-container {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    position: relative;
    padding-bottom: 5.3333vw;
}

.swiper-wrapper {
    column-gap: 1.3333vw;
}

.page {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: .2667vw;
}

.page li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 17.3333vw;
}

.page li img {
    width: 17.3333vw;
    object-fit: cover;
}

.page li span {
    font-size: 3.2vw;
    font-weight: bold;
    margin-top: 1.3333vw;
}

/* 添加分页器位置样式 */
:deep(.swiper-pagination) {
    position: absolute;
    bottom: 0 !important;
    /* 调整位置 */
}

/* 分页点颜色 */
:deep(.swiper-pagination-bullet) {
    background: #f5abab !important;
    border-radius: 0%;
    width: 5.3333vw;
    height: 1.3333vw;
    margin: 0px !important;
}

:deep(.swiper-pagination-bullet):first-of-type ,{
    border-radius:  2.6667vw 0 0 2.6667vw ;
}

:deep(.swiper-pagination-bullet):last-of-type {
    border-radius: 0 2.6667vw 2.6667vw 0;
}

:deep(.swiper-pagination-bullet-active):first-of-type,
:deep(.swiper-pagination-bullet-active):last-of-type{
    border-radius: 2.6667vw ;
}
:deep(.swiper-pagination-bullet-active) {
    background: #fc382a !important;
}

.shopHot{
    width: 100%;
    height: 13.3333vw;
    border-top: .2667vw solid #f0f0f0;
    margin-top: 2.6667vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.shopHot img{
    height: 10.6667vw;
    width: 18.6667vw;
}
.shopHot span{
    font-size: 3.7333vw;
    font-weight: bold;
}
.shopHot i.iconfont{
    color: red;
}
</style>